<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: 王韫琛
  Date: 2021/1/3
  Time: 15:06
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用户信息维护</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/webjars/layui/2.5.6/css/layui.css">

</head>
<body>
<%--修改用户信息界面--%>
<div id="form_body" style="text-align: center; display: none">
    <br>
    <br>
    <div class="layui-inline">
        <form id="dataFrm" class="layui-form  layui-form-pane" lay-filter="dataFrm">
            <%--隐藏于--%>
            <input type="hidden" name="id">
            <div class="layui-form-item">
                <label class="layui-form-label" for="username">用户名:</label>
                <div class="layui-input-inline">
                    <input type="text" name="username" id="username" required lay-verify="required" placeholder="请输入用户名"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" for="name">姓名:</label>
                <div class="layui-input-inline">
                    <input type="text" name="name" id="name" required lay-verify="required" placeholder="请输入真实姓名"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" for="pwd">密码:</label>
                <div class="layui-input-inline">
                    <input type="password" name="pwd" id="pwd" required lay-verify="required" placeholder="请输入密码"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" for="gender">性别:</label>
                <div class="layui-input-block">
                    <input type="radio" name="gender" value="男" title="男">&nbsp;&nbsp;
                    <input type="radio" name="gender" value="女" id="gender" title="女" checked>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" for="identity_crd">身份证:</label>
                <div class="layui-input-inline">
                    <input type="text" name="identity_card" id="identity_crd" required lay-verify="required"
                           placeholder="请输入身份证" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" for="permission">身份:</label>
                <div class="layui-input-inline">
                    <select name="permission" id="permission">
                        <option value="">请选择</option>
                        <option value="普通用户">普通用户</option>
                        <option value="普通管理员">普通管理员</option>
                        <option value="超级管理员">超级管理员</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" for="test1">日期:</label>
                <div class="layui-input-inline">
                    <input type="text" name="addtime" class="layui-input" id="test1">
                </div>
            </div>
            <div class="layui-form-item" style="text-align: center;">
                <button type="button" class="layui-btn" lay-submit lay-filter="doSubmit">提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </form>
    </div>
</div>
<%--用户信息显示--%>
<br/>
<%--搜索表单开始--%>
<form class="layui-form layui-form-pane" method="post">
    &nbsp;&nbsp;输入身份证搜索：
    <div class="layui-inline">
        <input class="layui-input" name="identity_card" lay-verify="required|identity">
    </div>
    <button class="layui-btn" lay-submit lay-filter="doSearch">搜索</button>
</form>
<%--搜索表单结束--%>

<table id="demo" lay-filter="test">
</table>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/javascript" src="${pageContext.request.contextPath}/webjars/layui/2.5.6/layui.js"></script>
<script>
    layui.use(['form', 'jquery', 'table','laydate', 'layer'], function () {
        var form = layui.form;
        var $ = layui.jquery;
        var table = layui.table;
        var layer = layui.layer;
        var laydate = layui.laydate;
        //日期控件
        laydate.render({
            elem: '#test1' //指定元素
            ,format: 'yyyy-MM-dd HH:mm:ss'
        });
        //渲染表格组件
        var tableIns = table.render({
            elem: '#demo'//绑定表格元素，推荐使用ID选择器
            , height: 468
            , url: '/allUser' //异步请求的地址,加入分页后，默认使用page(当前页码)和limit(每页显示数量)作为参数名称
            , page: true //开启分页
            , cols: [[ //表头
                //field属性：字段属性，该属性与实体类的属性名一致
                //title属性：表头文本
                //sort标识是否排序
                {field: 'id', title: 'ID', sort: true, fixed: 'left', align: "center"}
                , {field: 'username', title: '用户名', align: "center"}
                , {field: 'name', title: '姓名', align: "center"}
                , {field: 'gender', title: '性别', align: "center"}
                , {field: 'permission', title: '身份',sort: true, align: "center"}
                , {field: 'identity_card', title: '身份证', align: "center"}
                , {field: 'addtime', title: '添加时间', sort: true, align: "center"}
                , {title: '操作', toolbar: '#barDemo', width: 150, align: "center"}
            ]]
            , request: {
                pageName: 'pageNum' // 页码的参数名称，默认：page
                , limitName: 'pageSize' //每页数据量的参数名，默认：limit
            }
        });
        //监听表格行工具栏
        table.on('tool(test)', function (obj) {

            switch (obj.event) {
                //编辑
                case 'edit':
                    openUpdateWindow(obj.data);
                    break;
                //删除
                case 'del':
                    deleteById(obj.data);
            }
        });
        var mainIndex;//窗口索引
        var url;//提交地址
        //更新用户信息
        function openUpdateWindow(data) {
            console.log(data)
            mainIndex = layer.open({
                type: 1,//弹出层类型
                title: "修改用户信息",
                area: ['600px', '600px'],
                content: $("#form_body"),//引用的窗口代码

                success: function () {
                    //表单数据回显
                    form.val("dataFrm", data);
                    //修改请求
                    url = "/superUpdateUser";
                }
            });
        }

        //删除用户
        function deleteById(data) {
            //提示用户确认是否删除
            layer.confirm("确定要删除么", {icon: 3, title: "提示"}, function (index) {
                //发送ajax请求
                $.post("/superDeleteById", {"id": data.id}, function (result) {
                    if (result.success) {
                        layer.alert(result.message, {icon: 1});
                        //刷新数据表格
                        tableIns.reload();
                    } else {
                        layer.alert(result.message, {icon: 2});
                    }
                }, "json");
                //关闭提示框
                layer.close(index);
            });
        }

        //监听表单提交事件
        form.on("submit(doSubmit)", function (data) {
                $.post(url, data.field, function (result) {
                    if (result.success) {
                        layer.alert(result.message, {icon: 1});
                        //关闭窗口
                        layer.close(mainIndex);
                        //刷新数据表格
                        tableIns.reload();
                    } else {
                        layer.alert(result.message, {icon: 2});
                    }
                }, "json");
            return false;
        });

        //监听搜索按钮得提交开始
        form.on("submit(doSearch)", function (data) {
            tableIns.reload({
                url: '/SuperSelectByIdentityCard',
                where: data.field,//查询条件
                page: {
                    curr: 1
                }
            })
            //禁止页面刷新
            return false;
        })
        //监听搜索按钮结束
    });
</script>
</body>

</html>
